<template>
    <div>
        <el-button type="primary" @click="addhandle">添加</el-button>
        <el-table :data="arr" style="width: 100%">
            <el-table-column label="员工编号" prop="empno" />
            <el-table-column label="员工姓名" prop="ename" />
            <el-table-column label="职位" prop="job" />
            <el-table-column label="入职日期" prop="hiredate" />
            <el-table-column label="薪资" prop="sal" />
            <el-table-column label="部门编号" prop="deptno" />

            <el-table-column align="right">
                <!-- 搜索框 -->
                <template #header>
                    <el-input v-model="search" @keyup.enter="find" size="small" placeholder="按照姓名搜索" />
                </template>
                <!-- 搜索框 -->

                <!-- 两个按钮的插槽 -->
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="warning" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
                <!-- 两个按钮的插槽 -->
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="arrLength" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        当前页码 {{ currentPage4 }}
        每页数据条数 {{ pageSize4 }}
        <!-- 删除有关对话框 -->
        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <span>是否删除</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="deleteData">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 删除有关对话框 -->

        <!-- 编辑对话框 -->
        <el-dialog v-model="centerDialogVisible" title="Warning" width="500" align-center>

            <el-form :model="emp">
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="emp.empno" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="员工姓名" :label-width="formLabelWidth">
                    <el-input v-model="emp.ename" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工职位" :label-width="formLabelWidth">
                    <el-input v-model="emp.job" autocomplete="off" />
                </el-form-item>
                <el-form-item label="入职日期" :label-width="formLabelWidth">

                    <el-date-picker v-model="emp.hiredate" type="date" value-format="YYYY-MM-DD"
                        placeholder="Pick a day" :size="size" />
                </el-form-item>
                <el-form-item label="员工工资" :label-width="formLabelWidth">
                    <el-input v-model="emp.sal" autocomplete="off" />
                </el-form-item>
                <el-form-item label="部门编号" :label-width="formLabelWidth">
                    <el-select v-model="emp.deptno" placeholder="Select" style="width: 240px">
                        <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno"
                            :value="item.deptno" />
                    </el-select>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="edit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑对话框 -->

        <!-- 添加对话框 -->
        <el-dialog v-model="addDialogVisible" title="Warning" width="500" align-center>

            <el-form :model="addEmp">

                <el-form-item label="员工姓名" :label-width="formLabelWidth">
                    <el-input v-model="addEmp.ename" autocomplete="off" />
                </el-form-item>
                <el-form-item label="员工职位" :label-width="formLabelWidth">
                    <el-input v-model="addEmp.job" autocomplete="off" />
                </el-form-item>
                <el-form-item label="入职日期" :label-width="formLabelWidth">

                    <el-date-picker v-model="addEmp.hiredate" type="date" value-format="YYYY-MM-DD"
                        placeholder="Pick a day" :size="size" />
                </el-form-item>
                <el-form-item label="员工工资" :label-width="formLabelWidth">
                    <el-input v-model="addEmp.sal" autocomplete="off" />
                </el-form-item>
                <el-form-item label="部门编号" :label-width="formLabelWidth">
                    <el-select v-model="addEmp.deptno" placeholder="Select" style="width: 240px">
                        <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno"
                            :value="item.deptno" />
                    </el-select>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 添加对话框 -->

    </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import qs from "qs"
import { ElMessage } from 'element-plus'


const size = ref('default') // 分页组件尺寸
const disabled = ref(false) // 分页是否禁用
const background = ref(true) // 分页背景是否显示
const currentPage4 = ref(1) // 当前默认页码
const pageSize4 = ref(5)    // 初始每页数据条数


let arr = ref([])
let arrLength = ref(0)
const centerDialogVisible = ref(false)
const dialogVisible = ref(false)
const addDialogVisible = ref(false)


//搜索框
let search = ref('')
const find = () => {

    console.log(search.value)

    init()
}



let init = () => {
    console.log("当前页码：", currentPage4.value); // 应输出 1、2 等数字
    console.log("每页条数：", pageSize4.value);   // 应输出 5、10 等数字
    axios.get(`http://localhost:8080/test-servlet/empList?currentPage=${currentPage4.value}&pageSize=${pageSize4.value}&ename=${search.value}`)
        .then((res) => {
            console.log(res)
            arr.value = res.data.empList
            arrLength.value = res.data.totalCount

        })
}
onMounted(() => {
    init()
})


//查询dept
let dept = ref([])
let getDept = () => {
    axios.get("http://localhost:8080/test-servlet/getDept")
        .then((res) => {
            console.log(res)
            dept.value = res.data

        })
}

// 编辑
let emp = ref({}) // 记录点击编辑按钮之后的那行数据

const handleEdit = (index, row) => {
    centerDialogVisible.value = true
    console.log(index, row)
    getDept()
    emp.value = row
}
// 编辑（后台）
let edit = () => {

    axios.post(`http://localhost:8080/test-servlet/emit`, qs.stringify(emp.value))
        .then((res) => {
            if (res.data != null) {
                ElMessage({
                    message: '修改成功.',
                    type: 'success',
                })
                centerDialogVisible.value = false  // 隐藏对话框
                init()
            } else {
                ElMessage.error('修改失败.')
                centerDialogVisible.value = false  // 隐藏对话框
                init()
            }
        })
}

//添加

let addEmp = ref({})

const addhandle = () => {
    addDialogVisible.value = true
    getDept()
}

let add = () => {
    axios.post(`http://localhost:8080/test-servlet/addEmp`, qs.stringify(addEmp.value))
        .then((res) => {
            if (res.data != null) {
                ElMessage({
                    message: '添加成功.',
                    type: 'success',
                })
                addDialogVisible.value = false  // 隐藏对话框
                init()
            } else {
                ElMessage.error('添加失败.')
                addDialogVisible.value = false  // 隐藏对话框
                init()
            }
        })
}

// 删除
let deleteData = () => {
    axios.get(`http://localhost:8080/test-servlet/del?empno=${empno.value}`)
        .then((res) => {
            console.log(res)
            if (res.data == 1) {
                ElMessage({
                    message: '删除成功.',
                    type: 'success',
                })
                init()
                dialogVisible.value = false
            } else {
                ElMessage.error('删除失败.')
                init()
                dialogVisible.value = false
            }
        })
}

let empno = ref(0)
// 删除
const handleDelete = (index, row) => {
    dialogVisible.value = true
    console.log(index, row)
    console.log(row.empno)
    // deleteData(row.empno)
    empno.value = row.empno
}



const handleSizeChange = (val) => {
    console.log(`${val}条数据每页`)
    pageSize4.value = val  // 每切换每页显示数据条数，就更改pageSize4
    init()
}
const handleCurrentChange = (val) => {
    console.log(`当前页码: ${val}`)
    currentPage4.value = val
    init()
}

</script>